<template>
    <el-dialog :title="title" center :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
        <!-- 注意：“status-icon”属性的作用是“为输入框添加表示校验结果的反馈图标”↓ -->
        <el-form ref="formData" :rules="rules" :model="formData" label-width="100px" label-position="right" style="width:400px" status-icon>
            <el-form-item label="广告图片：" prop="imageUrl">
                <!-- “el-upload”组件被用于上传图片，其中“action”属性的作用是“指定图片将被提交到的目标地址”。“action”可以留空不填，但我们不能把它删除，否则浏览器会报错说“找不到‘action’”↓ -->
               <el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="uploadMainImg">
                    <img v-if="formData.imageUrl" :src="formData.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="广告标题：" prop="title">
                <el-input v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item label="广告链接：" prop="advertisementUrl">
                <el-input v-model="formData.advertisementUrl"></el-input>
            </el-form-item>
            <el-form-item label="广告跳转方式：" prop="advertisementTarget">
                <el-select v-model="formData.advertisementTarget" clearable style="width:185px">
                    <el-option label="在新窗口打开" value="_blank"></el-option>
                    <el-option label="在当前窗口打开" value="_self"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态：" prop="status">
                <el-radio-group v-model="formData.status" style="margin-left:55px">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="广告位置：" prop="position">
                <el-input-number v-model="formData.position" :min="1" :max="10000" style="width:300px"></el-input-number>
            </el-form-item>
            <el-form-item label="排序：" prop="sort">
                <el-input-number v-model="formData.sort" :min="1" :max="10000" style="width:300px"></el-input-number>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="margin-left: 0px;">
            <el-button type="primary" @click="submitForm('formData')" size="mini">确 定</el-button>
            <el-button @click="handleClose" size="mini">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import commonApi from '@/api/common'
import api from '@/api/advertisement'
export default {
    props:{
        title:{ // ←左边这项表示“弹出的对话框的标题”
            type:String,
            default:'',
        },
        dialogVisible:{ // ←左边这项被用来控制是否弹出对话框。取值为“true”时弹出对话框。
            type:Boolean,
            default:false,
        },
        formData:{ // ←左边这项表示“提交的表单数据”
            type:Object,
            default:{}
        },
        oldImageUrl:String, // 左边这项表示“编辑（窗口刚打开）时显示的（指‘从数据库查询出来的’）那张图片的地址”
        remoteClose:Function // ←左边这项被用来关闭对话框
    },
    data() {
        return {
            rules:{
                imageUrl:[
                    {required:true,message:'请上传广告图片',trigger:'blur'},
                ],
                title:[
                    {required:true,message:'请输入广告标题',trigger:'blur'},
                ],
                advertisementUrl:[
                    {required:true,message:'请输入广告链接',trigger:'blur'},
                ],
                advertisementTarget:[
                    {required:true,message:'请选择跳转方式',trigger:'change'},
                ],
                status:[
                    {required:true,message:'  请选择状态  ',trigger:'change'},
                ],
                position:[
                    {required:true,message:'请输入广告位置',trigger:'blur'},
                ],
                sort:[
                    {required:true,message:'请输入排序号码',trigger:'blur'},
                ],
            }
        }
    },
    methods: {
        // 1.“handleClose”表示关闭对话框；2.“done”虽然是一个被传入的对象，但在此处既可以接收也可以不接收（因为该参数在此处没什么用）↓
        handleClose(done){
            this.$refs['formData'].resetFields()
            // this.dialogVisible = false ←左边这种写法是错误的，因为“dialogVisible”在这个组件中是使用“props”选项接收的从其父组件中被传递过来的属性，所以在作为子组件的这个组件中不能直接修改其值。
            this.remoteClose() // ←左边这项表示通过触发名为“remoteClose”的事件函数来关闭对话框
        },
        // 提交表单数据
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                   /*  this.$message({
                        message:'成功提交表单！',
                        type:'success',
                        center:true
                    }) */
                    // 校验通过，提交表单数据
                    this.submitData()
                } else {
                    this.$message({
                        message:'提交表单失败（表单验证未通过）',
                        type:'error',
                        center:true
                    })
                    console.log('提交表单失败（表单验证未通过）');
                    return false;
                }
            });
        },
        async submitData(){ // ←注意：左边这项是“ES6”中的新语法，当加上“async”和“await”时，该方法返回当前响应的数据。
            let response = null
            if (this.formData.id) {
                // 编辑
                response = await api.update(this.formData)
            } else {
                // 新增
                response = await api.add(this.formData)
            }
            if (response.code === 20000) {
                this.$message({
                        message:'提交表单成功',
                        type:'success',
                        center:true
                    })
                    // 关闭对话框
                    this.handleClose()
            } else {
                    this.$message({
                        message:'提交表单失败（网络原因）',
                        type:'error',
                        center:true
                    })
                    console.log('提交表单失败（网络原因）');
                    return false;
            }
        },
        // 上传图片（参数“file”是上传的图片文件对象）
        uploadMainImg(file){
            console.log('上传图片',file)
            const data = new FormData // ←使用“new FormData”来封装表单对象（即创建表单）
            data.append('file',file.file) // ←注：“append()”方法被用于在被选元素的结尾(内部)插入指定内容
            commonApi.uploadImg(data).then(response => {
                // 将之前已经上传过的图片删除
                this.deleteImg()
                // 回显图片
                this.formData.imageUrl = response.data
            }).catch(error => {
                // this.$message.error('上传失败') // ←注：左边这行代码等价于以下的代码块↓
                this.$message({
                    message:'上传失败',
                    type:'error',
                    center:true
                })
            })

        },
        // 删除图片
        deleteImg(){
            // 如果之前已有图片，则在新上传的图片（地址）与刚打开编辑窗口时显示的原始图片（地址）不同的情况下把新上传的图片删除（此举是为了防止用户上传新图片后没有点击确定按钮把图片同表单内的其它信息绑定，一起保存到数据库，就直接点击了“关闭”或“取消”按钮，导致新的一张图片未被保存，前一张图片又因在上传新的一张图片时已被删除，使得用户再次点击“编辑”按钮打开“编辑”对话框时出现“广告图片”处无法显示（回显）图片的情况）↓
            // ↑例如当“this.formData.imageUrl”和“this.oldImageUrl”都表示“点击‘编辑’按钮，弹出‘编辑’对话框后即显示的‘图片a’”时，下面↓的括号中的条件不成立（取值为“false”），就不会进入大括号内发送请求删除图片；
            // ↑但是当用户点击“上传”按钮，上传了一张新的图片（即“图片b”），而“this.formData.imageUrl”即表示它时，因为“this.oldImageUrl”仍表示图片“图片a”，所以下面↓的括号中的条件成立（取值为“true”），就会进入大括号内发送请求删除新上传的图片（即“图片b”）。所以“图片a”就能被保留下来，使得用户即使没有点击确定按钮保存数据提交表单，而是直接点击了“关闭”或“取消”按钮关闭“编辑”对话框，在下次打开该对话框时仍能显示图片
            if (this.formData.imageUrl && this.formData.imageUrl !== this.oldImageUrl) {
                // 发送请求把新上传的图片删除（注：此处无需接收响应结果，只需要发送请求把图片删除，这样就行了↓）
                commonApi.deleteImg(this.formData.imageUrl)
            }
        },
    },
}
</script>
<style lang="scss" scoped>
    div{::v-deep.el-form-item__error{white-space: pre;top: 28px;left: 82.5px;}}
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
